﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width,  target-densitydpi=medium-dpi" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>overflow test</title>
<style type="text/css">
	html,body,p,h1 { margin:0; padding:0; }
	body { background:#e1e1e1; }

	.wrapper { height:1000px; padding:10px;	}
	
	h1 { margin:20px 0 5px; font-size:20px; }
	p { padding:5px 0; }
	
	iframe { position:relative; z-index:10; }
	a.body_link { position:relative; top:-40px; left:-30px; display:inline-block; width:300px; height:150px; background:pink; border:1px solid red; text-align:center; z-index:9; overflow:hidden; }
	
	.zindex_layer  { position:relative; top:-50px; width:300px; height:200px; background:pink; z-index:8; }
	
</style>
</head>
<body>
<!-- wrapper -->
<div class="wrapper">
	<h1>얼굴만 나와야 정상<br/>어깨까지 나오면 비정상</h1>
	<h1>iframe 영역 테스트</h1>
	<p>width - 200px / height - 200px</p>
	<iframe src="iframe_inner.html" width="150" height="150" frameborder="0">
		<p>요건 아이프레임 대체 컨텐츠지롱~</p>
	</iframe>
	
	<h1>iframe 링크 영역테스트</h1>
	<iframe src="iframe_inner2.html" width="150" height="150" frameborder="0">
		<p>요건 아이프레임 대체 컨텐츠지롱~</p>
	</iframe>
	<a href="javascript:alert('나는 바디지롱!');" class="body_link">눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러눌러</a>
	
	<h1>iframe z-index 테스트</h1>
	<p>iframe z값:10 / pink box z값:8</p>
	<iframe src="iframe_inner.html" width="150" height="150" frameborder="0">
		<p>요건 아이프레임 대체 컨텐츠지롱~</p>
	</iframe>
	<div class="zindex_layer">
		<select>
			<option>난 보이면 안되지롱롱롱난 보이면 안되</option>
			<option>난 보이면 안되지롱롱롱난 보이면 안되</option>
		</select>
		<input type="text" /><br/>
		<input type="text" /><br/>
		<input type="text" /><br/>
		<input type="text" />
		<select>
			<option>난 보이면 안되지롱롱롱난 보이면 안되</option>
			<option>난 보이면 안되지롱롱롱난 보이면 안되</option>
		</select>
	</div>
<!-- //wrapper -->
</div>
</body>
</html>
